/******************************************************************************************
 * Import
 ******************************************************************************************/

// module
import React, {Component} from 'react';
import {View, TextInput, Dimensions} from 'react-native';
import SplashScreen from 'react-native-splash-screen';
import { Button } from 'antd-mobile-rn';

// project
import {
    Page, Content, Svg, Text, Label, Image, ScrollX, ScrollY, ItemX, ItemY, Row, Header, Footer, Float, Wrap, Touch, Hand, ButtonOpacity, ButtonLight, TouchOpacity, TouchLight
} from '../../library'
import {Icon} from '../../preset';
import group from '../../preset/style/group';

/******************************************************************************************
 * Export Class
 ******************************************************************************************/

export default class Location extends Component {

    /*------------------------------------------------------------------------------------
	 * 初始化
	 *-----------------------------------------------------------------------------------*/
	constructor(props){
        super(props)
        
        /**
         * state
         */
		this.state = {
            // 手机屏幕的高度 减去 上半部分不随页面滚动的高度
            h: parseInt(Dimensions.get('window').height) - 140,
            province:[
                {name:'热门城市'},
                {name:'北京'},
                {name:'天津'},
                {name:'河北'},
                {name:'山西'},
                {name:'内蒙古'},
                {name:'辽宁'},
                {name:'吉林'},
                {name:'黑龙江'},
                {name:'上海'},
                {name:'江苏'},
                {name:'浙江'},
                {name:'山西1'},
                {name:'内蒙古1'},
                {name:'辽宁1'},
                {name:'吉林1'},
                {name:'黑龙江1'},
                {name:'上海1'},
                {name:'江苏1'},
                {name:'浙江1'},
            ],
            city:[
                {name:'石家庄市'},
                {name:'保定市'},
                {name:'唐山市'},
                {name:'秦皇岛市'},
                {name:'邯郸市'},
                {name:'张家口市'},
                {name:'承德市'},
                {name:'沧州市'},
                {name:'廊坊市'},
                {name:'衡水市'},
                {name:'保定市1'},
                {name:'唐山市1'},
                {name:'秦皇岛市1'},
                {name:'邯郸市1'},
                {name:'张家口市1'},
                {name:'承德市1'},
                {name:'沧州市1'},
                {name:'廊坊市1'},
                {name:'衡水市1'},
            ]
		}
    }

	/*------------------------------------------------------------------------------------
	 * 渲染
	 *-----------------------------------------------------------------------------------*/
	render() {
		return (
			<Page>

                {/* 搜索框和定位条不随页面滚动，所以没有放在content标签内 */}
                <View style={{marginTop:40,backgroundColor:'#efeff4',height:45}}>
                    <Row pa='8 10' ma='8 10' bg='#fff' ra='5' h='45' x='center' y='center'>
                        <Image df source={require('../../assets/u1844.png')} w='14' h='14' mr='6'></Image>
                        <Hand f='1'>
                            <TextInput placeholder='搜索' placeholderTextColor='#bfbfbf' multiline = {true} underlineColorAndroid='transparent' style={{height:30,padding:0,flex:1}} />
                        </Hand>
                    </Row>
                </View>
                {/* 定位条 */}
                <View style={{height:40,borderBottomColor:'#f0f0f0',borderBottomWidth:1}}>
                    <Row bg='#fff' h='40' px='10'>
                        <Image source={require('../../assets/location.png')} w='15' h='15'/>
                        <Text>定位</Text>
                        <Text color='#26c75e' pl='10'>河北省></Text>
                    </Row>
                </View>

                {/* 各省以及各省对应的城市 */}
                <View style={{display:'flex',backgroundColor:'#fff',height: this.state.h,flexDirection:'row'}}>
                     <View style={{backgroundColor:'#ededf2',flex:1,height:this.state.h}}>
                        <Content>

                            {/* 循环省 */}
                            {this.state.province.map((item,index)=>{
                                return(
                                    <Hand key={item.name} h='40' x='center' y='center' group={index==3 ? group.on : group.un}><Text>{item.name}</Text></Hand>
                                )
                            })}

                        </Content>
                     </View>
                     <View style={{backgroundColor:'#fff',flex:2,height:this.state.h}}>
                        <Content>

                            {/* 循环市 */}
                            {this.state.city.map(item=>{
                                return (
                                    <Hand key={item.name} h='40' x='center' y='center' bb='1 #f0f0f0'>
                                        <Text>{item.name}</Text>
                                    </Hand>
                                )
                            })}
                            
                        </Content>
                     </View>
                </View>
 
                {/* 头部 */}
				<Header h='40' px='10'></Header>

			</Page>
		);
	}
}
